<template>
    <div class="el-table-carousel-wrap" ref="tableWwrap" @mouseenter="mouseenterEvent" @mouseleave="mouseleaveEvent">
        <slot></slot>
    </div>
</template>

<script>
//1.使用原生滚动条进行滚动，容器默认高度100%，滚动条样式使用css重置
//2.表格内容使用插槽自行渲染，看板对UI要求高，只能自己写样式，表头固定可以使用简单的CSS属性进行设置
//3.组件初次渲染，或者数据发生变动，则初始化轮播状态
//4.滚动到底，则抛出事件，让业务层执行数据刷新，如果没有产生滚动，也抛出相应的事件
export default{
    props: {
        //表格数据，用于监听数据变化，重置轮播状态
        data: {
            type:Array,
            default: function(){
                return []
            }
        },
        //滚动间隔（毫秒）
        duration: {
            type: Number,
            default: 90
        },
        //滚动延迟（毫秒）
        delay: {
            type: Number,
            default: 3000
        },
        // 步进延迟，每混动一行后，自动暂停多久（毫秒）
        stepDelay: {
            type: Number,
            default: 0
        },
        // 行标识(用于算行高,步进模式专用)
        rowMark: {
            type: String,
            default: 'tbody tr'
        },
        //鼠标移入是否停止滚动
        hoverStop: {
            type: Boolean,
            default: true
        },
    },
    data(){
        return {
            timer: null,//定时器
            timerDelay: null,//定时器
            timerStepDelay: null,//

            mouseInBox: false,//鼠标是否在容器内

            scrollDistance: 0,//可滚动距离
            rowHeight: 0,//行高
            scrollRowNumber: 0,//已滚动的行数
        }
    },
    //这里不用update，而是用watch进行监听，是因为插槽的缘故，会导致update异常
    watch: {
        data(newVal,oldVal){
            //等待渲染完毕
            this.$nextTick(()=>{
                //初始化滚动
                this.initScroll('watch')
            })
        }
    },
    mounted(){ 
        //初始化滚动
        this.initScroll('init')
    },
    beforeDestroy(){
        //清除定时器
        clearInterval(this.timer)
        clearTimeout(this.timerDelay)
        clearTimeout(this.timerStepDelay)
    },
    methods: {
        //计算可滚动距离
        updateScrollDistance(){
            //容器
            var box = this.$refs['tableWwrap']
            //计算最大的滚动距离
            this.scrollDistance = (box.scrollHeight || 0) - box.clientHeight
        },
        // 计算行高(这个不标准)
        getRowHeight(){
            // 容器
            var box = this.$refs['tableWwrap']
            // 行节点
            var rowNode = box.querySelector(this.rowMark)
            // 行高
            if(rowNode){
                this.rowHeight = rowNode.offsetHeight || 0
            }else{
                this.rowHeight = 0
            }
        },
        //初始化滚动 mode为了区分初始数据还是异步数据
        initScroll(mode = 'init'){
            //容器
            var box = this.$refs['tableWwrap']
            //计算可滚动距离
            this.updateScrollDistance()
            // 计算行高
            this.getRowHeight()
            //回到顶部
            box.scrollTo({
                top: 0
            })
            this.scrollRowNumber = 0
            //没有滚动距离，不进行滚动初始化
            if(this.scrollDistance <= 0){
                //抛出事件，没有滚动
                this.$emit('noScroll', mode)
            }else{
                //延迟开始滚动
                clearTimeout(this.timerDelay)
                this.timerDelay = setTimeout(()=>{
                    //开始滚动
                    this.startScroll()
                }, this.delay)
            }
        },
        //开启滚动
        startScroll(){
            //容器
            var box = this.$refs['tableWwrap']
            //清除旧定时器
            clearInterval(this.timer)
            //开启定时器
            this.timer = setInterval(()=>{
                //如果开启了悬停，且鼠标处于悬停状态
                if(this.hoverStop && this.mouseInBox){
                    //什么也不做
                }else{
                    //当前滚动距离
                    var scrollTop = box.scrollTop
                    //滚动前判断是否已经到顶
                    if(scrollTop >= this.scrollDistance){
                        //清除定时器
                        clearInterval(this.timer)
                        //事件抛出
                        this.$emit('scrollToEnd')
                    }else{
                        //执行滚动
                        scrollTop += 1
                        box.scrollTo({
                            top: scrollTop
                        })
                        // 计算滚动行数
                        const scrollRowNumber = Math.floor(scrollTop / this.rowHeight)
                        // 记录新的滚动行数
                        if(scrollRowNumber > this.scrollRowNumber){
                            // 记录最新的
                            this.scrollRowNumber = scrollRowNumber
                            // 步进功能
                            if(Number(this.stepDelay) > 0){
                                //清除定时器
                                clearInterval(this.timer)
                                //延迟重新开启
                                clearTimeout(this.timerStepDelay)
                                this.timerStepDelay = setTimeout(()=>{
                                    //开启滚动
                                    this.startScroll()
                                }, Number(this.stepDelay))
                            }
                        }
                    }
                }
            }, this.duration)
        },
        //终止滚动
        stopScroll(){
            //清除定时器
            clearInterval(this.timer)
            clearTimeout(this.timerDelay)
            clearTimeout(this.timerStepDelay)
        },
        // 重置滚动
        resetScroll(){
            //容器
            var box = this.$refs['tableWwrap']
            box.scrollTo({
                top: 0
            })
            this.scrollRowNumber = 0
            //清除旧定时器
            clearTimeout(this.timerDelay)
            //开始滚动
            this.timerDelay = setTimeout(()=>{
                //开始滚动
                this.startScroll()
            }, this.delay)
        },
        //鼠标移入
        mouseenterEvent(){
            //记录鼠标移入状态
            this.mouseInBox = true
        },
        //鼠标移出
        mouseleaveEvent(){
            //记录鼠标移入状态
            this.mouseInBox = false
        }
    }
}
</script>


<style scoped>
.el-table-carousel-wrap{
    height: 100%;
    overflow: auto;
}
/* 滚动条宽度 */
.el-table-carousel-wrap::-webkit-scrollbar {
    width: 4px;
    border-radius: 2px;
}
/* 定制滚动条轨道样式 */
.el-table-carousel-wrap::-webkit-scrollbar-track {
  background-color: #345D7E;
}
.el-table-carousel-wrap:hover::-webkit-scrollbar-track {
  background-color: #345D7E;
}
 
/* 定制滚动条滑块样式 */
.el-table-carousel-wrap::-webkit-scrollbar-thumb {
  background-color: #183C75;
}
.el-table-carousel-wrap:hover::-webkit-scrollbar-thumb {
  background-color: #183C75;
}
 
/* 定制滚动条按钮样式 */
.el-table-carousel-wrap::-webkit-scrollbar-button {
    background-color: #183C75;
    height: 4px;
    opacity: 0;
}
.el-table-carousel-wrap:hover::-webkit-scrollbar-button {
    background-color: #183C75;
}
</style>